<template>
  <div class="bigHigh_box">
    <TopOne :obj="obj" :getYao="getYao" :datalist="datalist" />
    <div class="customTodo_body">
      <TopTwo :todoButton="todoButton" />
      <el-table
        :data="tableData"
        style="width: 100%"
        highlight-current-row="true"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="type" label="请假类型"> </el-table-column>
        <el-table-column prop="iSwhy" label="请假原因"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间" sortable>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" sortable>
        </el-table-column>
        <el-table-column prop="dayLong" label="请假天数" sortable>
        </el-table-column>
        <el-table-column prop="tiTime" label="提交时间" sortable>
        </el-table-column>
        <el-table-column prop="done" label="审批状态"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <RouterLink
              :to="`/home/please/dalite?id=${scope.row.id}&&type=请假申请`"
              >🗐详情</RouterLink
            >
            <!-- <el-button @click="handleEdit(scope.row)" type="text"></el-button> -->
            <el-button type="text" @click="handleDelete(scope.row.id)"
              >🗑︎删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
//用来进行跳转的
import TopOne from "../../components/topOne.vue";
//用来进行搜索框的
import TopTwo from "../../components/topTwo.vue";
import axios from "axios";
import { onMounted, ref } from "vue";
// import {useRouter} from 'vue-router'
// 传给第一个input框的数据
const obj = {
  // 第一个输入框
  inputOne: {
    done: true,
    tishi: "搜索关键词",
  },
  // 后面倒数第二个带小人的输入框
  inputTwo: {
    done: true,
    tishi: "跟进人员",
  },
  // 日历输入框
  inputThere: {
    done: true,
    tishi: "时间范围",
  },
  // 3个下拉列表
  selectOne: {
    done: true,
    tishi: "所属模块",
    todoDone: [
      {
        value: "公海客户",
        label: "公海客户",
      },
      {
        value: "垃圾客户",
        label: "垃圾客户",
      },
    ],
  },
  selectTwo: {
    done: true,
    tishi: "跟进类型",
    todoDone: [
      {
        value: "待跟进",
        label: "待跟进",
      },
      {
        value: "已跟进",
        label: "已跟进",
      },
    ],
  },
  selectThere: {
    done: false,
    tishi: "客户星级",
    todoDone: [
      {
        label: "⭐",
        value: "1",
      },
      {
        label: "⭐⭐",
        value: "2",
      },
      {
        label: "⭐⭐⭐",
        value: "3",
      },
    ],
  },
};
// 获取到input的数据
// function getYao(value: any) {
//   if (value.inputOne) {
//     tableData.value = tableData.value.filter((item: any) => {
//       if (item.iSwhy.indexOf(value.inputOne) != -1) {
//         return item;
//       }
//     });
//   }
//   if (value.selectOne) {
//     tableData.value = tableData.value.filter((item: any) => {
//       if (item.done.indexOf(value.selectOne) != -1) {
//         return item;
//       }
//     });
//   }
//   console.log(value, "头部请求获取到的");
// }
// 传给一排按钮的数据+方法
const todoButton = [
  { id: 1, name: "➕︎添加", fn: addOne },
  { id: 2, name: "⬇导入" },
  { id: 3, name: "⬆导出" },
  // {id:4,name:'🗊新建任务'},
  // {id:5,name:'🗘转移客户'},
  // {id:6,name:'🕴移入公海'},
  // {id:7,name:'⛙合并客户'},
  // {id:8,name:'🖊︎批量编辑'},
];
// 给按钮绑定事件
function addOne() {
  console.log("添加");
}
// import axios from 'axios';
let tableData = ref();

// 获取数据
onMounted(() => {
  datalist();
});
let datalist = async () => {
  try {
    // 执行异步操作，获取外部数据
    const response = await fetch("http://localhost:3000/oneTodo");
    const data = await response.json();
    console.log(data, "-----data");

    // 对获取到的数据进行处理
    tableData.value = data.data;
  } catch (error) {
    console.error(error);
  }
};

// 表格按钮
// let rou=useRouter()
// function handleEdit(am: any) {
//     rou.push('/home/please/dalite')
//     console.log(am, "am");
// }
let handleDelete = async (index: number) => {
  try {
    const response = await axios.post("http://localhost:3000/del", {
      key: `${index}`,
    });
    console.log("POST 请求成功:", response.data);
    datalist();
  } catch (error) {
    console.error("POST 请求失败:", error);
  }
};

let multipleSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
</script>

<style scoped></style>